<template>
  <div
    class="gs-second"
    :style="{ height: heightNum }"
    :id="gsData.id"
    :ref="gsData.id"
  ></div>
</template>

<script>
export default {
  props: {
    gsData: {
        type: Object,
      default: function () {
        return ()=>{};
      },
    },
    seriesCenter: {
      type: Array,
      default: function () {
        return [80, 100];
      },
    },
    heightNum: {
      type: String,
      default: "120px",
    },
  },
  data() {
    return {
     radioTemp:0,
    };
  },
  components: {},
  mounted() {
    this.echartsInit();
    this.radioTemp = this.gsData.radio
  },
  beforeDestroy() {},
  methods: {
    echartsInit() {
    
      this.$echarts.init(this.$refs[this.gsData.id]).setOption({
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            center: this.seriesCenter,
            radius: "150%",
            min: 0,
            max: 100,
            // splitNumber: 8,
            itemStyle: {
              color: "#179775",
            },
            progress: {
              show: true,
              width: 10,
            },
            pointer: {
              icon: "triangle",
              show: true,
              offsetCenter: [0, "-70%"],
              itemStyle: {
                color: "#179775",
              },
              length: "15%",
              width: 4,
            },
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  // [0.25, "#FF6E76"],
                  // [0.5, "#FDDD60"],
                  // [0.75, "#58D9F9"],
                  // [1, "#7CFFB2"],
                  [0.25, "#3b466f"],
                  [0.5, "#3b466f"],
                  [0.75, "#3b466f"],
                  [1, "#3b466f"],
                ],
              },
            },
            axisTick: {
              show: false,
              length: 2,
              lineStyle: {
                color: "#ffffff",
                width: 1,
                opacity: 0.8,
              },
              distance: 3,
            },
            splitLine: {
              show: false,
              length: 4,
              lineStyle: {
                color: "#ffffff",
                width: 1,
              },
              distance: 3,
            },
            axisLabel: {
              show: false,
            },
            title: {
              fontSize: 12,
              color: "#fff",
              offsetCenter: [0, "-50%"],
            },
            detail: {
              fontSize: 18,
              offsetCenter: [0, "-20%"],
              valueAnimation: true,
              formatter: function (value) {
                return value + "%";
              },
              color: "#2DEFFF",
            },
            data: [
              {
                value: this.gsData.radio==='-'?0:Math.abs(this.gsData.radio),
                name: "同比",
                itemStyle: {
                  color: this.gsData.radio > 0 ? "#179875" : "#9f4766",
                },
              },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.gs-second {
  width: 100%;
  // height:100px;
  margin-bottom: -10px;
}
</style>
